import { ProTable } from '@ant-design/pro-components';
import { timestampToTime } from '@/hooks/useAddKey';
import {
  Button,
  Input,
  Table,
  Tooltip,
  Col,
  Form,
  Row,
  Switch,
  Select,
  message,
} from 'antd';
import { AreaChartOutlined } from '@ant-design/icons';
import React, { useRef } from 'react';
import LazyLoad from 'react-lazyload';
import { history, connect, useSelector } from 'umi';
function rentalHouse({ dispatch }: any) {
  const actionRef = useRef();
  const { rentalList } = useSelector(({ kefu }: any) => {
    return kefu;
  });
  console.log(rentalList);
  const onFinish = (values: any) => {
    console.log('Success:', values);
    dispatch({
      type: 'kefu/SEARCH',
      payload: values,
    });
  };
  const columns: any = [
    {
      title: 'ID',
      width: 30,
      dataIndex: 'id',
      align: 'center',
      search: false,
      sorter: (a: any, b: any) => b.id - a.id,
    },
    {
      title: '楼盘名称',
      width: 90,
      dataIndex: 'estate_name',
      align: 'center',
      search: false,
    },
    {
      title: '标题',
      width: 160,
      search: false,
      dataIndex: 'title',
      align: 'left',
      render: (item: any, record: any) => {
        return (
          <React.Fragment>
            {item}
            <Tooltip
              title={
                <LazyLoad>
                  <img
                    src={`http://fangadmin.shbwyz.com${record.img}`}
                    style={{ width: '80px', height: '80px' }}
                  ></img>
                </LazyLoad>
              }
            >
              <AreaChartOutlined style={{ margin: '0 5px' }} />
            </Tooltip>
            <img
              src="http://fangadmin.shbwyz.com/static/images/rec.png"
              alt=""
            />
          </React.Fragment>
        );
      },
    },
    {
      title: '面积',
      width: 90,
      dataIndex: 'acreage',
      align: 'center',
      search: false,
      render: (item: any) => {
        return <span>{item}m²</span>;
      },
    },
    {
      title: '价格',
      dataIndex: 'price',
      width: 40,
      search: false,
      align: 'left',
      render: (item: any) => {
        return <span>{item}万</span>;
      },
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      width: 100,
      search: false,
      align: 'left',
      render: (item: any) => {
        return timestampToTime(item);
      },
    },
    {
      title: '排序',
      dataIndex: 'ordid',
      width: 60,
      search: false,
      align: 'center',
      sorter: (a: any, b: any) => a.ordid - b.ordid,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 40,
      align: 'center',
      search: false,
      render: (item: any) => {
        return (
          <Switch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            defaultChecked={item === 1 ? true : false}
          />
        );
      },
    },
    {
      title: '操作',
      width: 140,
      key: 'option',
      search: false,
      valueType: 'option',
      align: 'center',
      render: (item: any, record: any) => {
        return (
          <React.Fragment>
            <Row>
              <Col xs={{ span: 4, offset: 2 }} lg={{ span: 6, offset: 2 }}>
                <Button
                  size="small"
                  onClick={() => {
                    history.push('/home/loupan/addHouseType');
                  }}
                >
                  成交记录
                </Button>
              </Col>
              <Col xs={{ span: 4, offset: 1 }} lg={{ span: 4, offset: 2 }}>
                <Button
                  size="small"
                  onClick={() => {
                    history.push('/home/used/editSendDetail', {
                      id: record.id,
                    });
                  }}
                >
                  编辑
                </Button>
              </Col>
              <Col xs={{ span: 4, offset: 2 }} lg={{ span: 3, offset: 2 }}>
                <Button size="small">删除</Button>
              </Col>
            </Row>
          </React.Fragment>
        );
      },
    },
  ];

  return (
    <React.Fragment>
      <Form
        style={{
          width: '100%',
          height: '50px',
          background: 'rgba(242,242,242)',
          lineHeight: '50px',
          borderLeft: '5px solid rgba(0,150,136)',
          display: 'flex',
        }}
        onFinish={onFinish}
      >
        <Form.Item
          label="区域"
          name="area"
          style={{
            width: '150px',
            marginLeft: '20px',
            marginTop: '10px',
          }}
        >
          <Select
            defaultValue="--请选择--"
            style={{ width: 110 }}
            align="center"
            options={[
              { value: '--请选择--', label: '--请选择--' },
              { value: '海口', label: '海口' },
              { value: '三亚', label: '三亚' },
              { value: '陵水', label: '陵水' },
              { value: '琼海', label: '琼海' },
              { value: '万宁', label: '万宁' },
              { value: '广州', label: '广州' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label="状态"
          name="status"
          style={{ marginTop: '10px', marginLeft: '20px' }}
        >
          <Select
            defaultValue="-所有-"
            style={{ width: 90 }}
            options={[
              { value: '-所有-', label: '-所有-' },
              { value: '启用', label: '启用' },
              { value: '禁用', label: '禁用' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label="关键词"
          name="title"
          style={{ marginTop: '10px', marginLeft: '20px' }}
        >
          <Input />
        </Form.Item>
        <Form.Item
          wrapperCol={{ offset: 8, span: 16 }}
          style={{ marginTop: '10px', marginLeft: '20px' }}
        >
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <ProTable<any>
        columns={columns}
        dataSource={rentalList}
        dateFormatter="string"
        actionRef={actionRef}
        search={false}
        cardBordered
        pagination={{
          showQuickJumper: true,
          pageSize: 5,
        }}
        toolbar={{
          // search: {
          //   onSearch: (value: string) => {
          //     alert(value);
          //   },
          // },
          actions: [
            <Button
              key="primary"
              type="primary"
              onClick={() => {
                alert('add');
              }}
            >
              添加
            </Button>,
          ],
        }}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
      />
    </React.Fragment>
  );
}
const mapStateToProps = ({ kefu: { rentalList } }: any) => {
  return {
    rentalList,
  };
};

export default connect(mapStateToProps)(rentalHouse);
